<template>
    <div class="homeview">
        <router-view />
        <van-tabbar v-model="uname" @change="onChange" inactive-color="gray" active-color="#000" class="tabbar">
            <van-tabbar-item name="/home" icon="wap-home-o">首页</van-tabbar-item>
            <van-tabbar-item name="/video" icon="tv-o">视频</van-tabbar-item>
            <van-tabbar-item name="/message" icon="chat-o" badge="99+">消息</van-tabbar-item>
            <van-tabbar-item name="/concern" icon="like-o">关注</van-tabbar-item>
            <van-tabbar-item name="/mine" icon="manager-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRouter, RouterView, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const uname = ref( "home" );

const onChange = ( index ) => {
    router.push( index );
    switch ( index ) {
        case "/mine":
            break;
        case "/home":
            break;
        default:
            break;
    }
}

onMounted( () => {
    uname.value = route.path;
} );



watch(
    () => route.path,
    ( newPath ) => {
        uname.value = newPath;
    }
);
</script>

<style lang="scss" scoped>
.homeview {
    padding-bottom: 55px;
    height: 100%;

    .tabbar {
        background-color: #fff;
    }
}
</style>